<template>
  <div
    :class="['recommend-question-container', { 'input-shortcut': isFromInput }]"
    v-show="show"
    ref="scrollContainer"
    v-if="showList.length"
    @wheel="handleWheel"
  >
    <ul class="recommend-question-list">
      <li
        class="question-item"
        ref="flexItems"
        v-for="(item, index) in showList"
        :key="index"
        @click="handleItemClick(item.content)"
      >
        <v-button class="btn-text" type="text" :disabled="disabled">{{
          item.question
        }}</v-button>
      </li>
    </ul>
  </div>
</template>

<script>
import { throttle } from "lodash";

const SHOW_TYPE = {
  None: 0, // 不显示
  HomepageOnly: 1, // 仅首页显示, 问候语页面显示
  InputTopOnly: 2, // 仅对话框上方显示
  All: 3, // 全部显示
};
export default {
  name: "RecommendQuestionList",
  props: {
    // 此组件使用的类型，用于区分是在输入框中还是问候语中
    type: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
      // 是否显示
      show: true,
      isFromInput: this.type === "input",
      isFromGreeting: this.type === "greeting",
    };
  },
  created() {
    const cachedConfig = this.$clientData.getConfigInfo() || {};
    this.list = this.list.concat(
      cachedConfig.experience_recommend_question || []
    );
    // 监听配置信息变更
    this.$eventHub.$on("client_configChange", (res) => {
      this.list = this.list.concat(res.experience_recommend_question || []);
    });
  },
  computed: {
    showList() {
      if (this.isFromGreeting) {
        return this.list.filter(
          (l) =>
            l.show_type === SHOW_TYPE.All ||
            l.show_type === SHOW_TYPE.HomepageOnly
        );
      }
      if (this.isFromInput) {
        return this.list.filter(
          (l) =>
            l.show_type === SHOW_TYPE.All ||
            l.show_type === SHOW_TYPE.InputTopOnly
        );
      }
      return this.list.filter((l) => l.show_type !== SHOW_TYPE.None);
    },
  },
  methods: {
    handleItemClick: throttle(function (val) {
      this.$emit("itemClick", val);
      if (this.isFromInput) {
        this.hide();
      }
    }, 500),
    hide() {
      this.show = false;
    },
    handleWheel(event) {
      let scrollDistance = 0;
      // 判断是左右滑动还是上下滑动
      if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
        // 左右滑动
        scrollDistance = event.deltaX;
      } else {
        // 上下滑动
        scrollDistance = event.deltaY;
      }
      // 阻止默认的滚动行为
      event.preventDefault();
      // 获取滚动容器
      const container = this.$refs.scrollContainer;
      container.scrollLeft += scrollDistance;
    },
  },
};
</script>

<style scoped lang="less">
.recommend-question-container {
  --input-margin: 12px;
  margin: var(--spacing-loose) 0 0 0;
  transition: all 0.2s var(--motion--ease-in-out);

  &::-webkit-scrollbar {
    display: none;
  }

  &.input-shortcut {
    overflow-x: auto;
    padding: var(--input-margin) 0;
    margin: 0 var(--input-margin);

    &:after {
      content: "";
      position: absolute; /* 以外部question-input容器来定位 */
      top: 0;
      bottom: 0;
      width: var(--size-m);
      height: 52px;
      pointer-events: none; /* 防止蒙版影响滚动 */
      z-index: 1;
      border-radius: var(--radius-0);
      right: var(--input-margin);
      background: linear-gradient(
        to left,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0)
      );
    }

    .recommend-question-list {
      flex-flow: row nowrap;
      justify-content: flex-start;
      white-space: nowrap;
    }
  }
}

.recommend-question-list {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
  gap: var(--spacing-base);
  padding: 0;
  margin: 0;
  transition: all var(--duration-start-s) var(--motion--ease-in-out);
  .question-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    list-style: none;
    padding: 0 var(--spacing-base-loose);
    border-radius: var(--radius-large);
    border: var(--border-thickness) solid var(--color-border-normal);
    background: var(--inverse-opacity-4);
    transition: all var(--duration-start-s) var(--motion--ease-in-out);
    /* shadow/--shadow-small-light */
    box-shadow: var(--shadow-small-light-x-1) var(--shadow-small-light-y-1)
        var(--shadow-large-light-blur-1) var(--shadow-small-light-spread-1)
        var(--shadow-small-light-color-1),
      var(--shadow-small-light-x-2) var(--shadow-small-light-y-2)
        var(--shadow-small-light-blur-2) var(--shadow-small-light-spread-2)
        var(--shadow-small-light-color-2),
      var(--shadow-small-light-x-3) var(--shadow-small-light-y-3)
        var(--shadow-small-light-blur-3) var(--shadow-small-light-spread-3)
        var(--shadow-small-light-color-3);
    .btn-text {
      color: var(--color-primary-normal);
      /* caption/--caption-medium */
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
      line-height: 16px; /* 133.333% */
      &:hover {
        background-color: transparent;
        border-color: transparent;
      }
    }
    &:hover {
      background: var(--color-fill-hover);
    }
    &:active {
      background: var(--color-fill-active);
    }
  }
}
</style>
